<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE学习 - 1-5-2 登录和退出页面-组合式</title>
</head>

<body>


  <!--载入vue.js-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <div id="Application">
    <!--显示标题-->
    <h1>欢迎您{{state?"："+userName:",请登录"}}</h1>
    <!--进行if判断-->
    <div v-if="!state">
      账号：<input v-model="userName" type="text" />
      <br>
      密码：<input v-model="password" type="password" />
    </div>
    <div v-else>
      <p>账号：{{userName}}</p>
      <p>密码：{{password}}</p>
    </div>
    <!--展示按钮-->
    <button @click="touch">{{state?"注销":"登录"}}</button>
  </div>
  <script>
    const App = Vue.createApp({
      setup() {
        const userName = Vue.ref("");               //账号
        const password = Vue.ref("");               //密码
        const state = Vue.ref(false);               //登录状态

        //判断是否登录，执行对应功能
        const touch = () => {
          if (!state.value) {
            ;           //登录
          } else {
            loginOut();        //退出
          }
        };

        //登录
        const login = () => {
          if (
            userName.value.length > 0
            &&
            password.value.length > 0
          ) {
            alert(`
            账号：${userName.value}  
            密码：${password.value}
            `
            );                                                //弹窗展示信息
            state.value = !state.value;                       //修改状态
          } else {
            alert('请输入账号密码');                             //提示信息
          }
        };

        //退出登录
        const loginOut = () => {
          state.value = !state.value;      //修改登录状态
          userName.value = "";             //重置信息
          password.value = "";             //重置信息
        }
        return {
          title,
          state,
          userName,
          password,
          touch
        }
      },
    })
    App.mount("#Application")
  </script>

  <style>
    body {
      text-align: center;
    }

    button {
      width: 50px;
      padding: 6px 0;
      margin: 20px auto;
      color: white;
      background-color: tomato;
      border: 0px;
      border-radius: 8px;
    }
  </style>


</body>

</html>